<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>打印预览</title>
    <style type="text/css">
    	/* 屏幕显示样式  Start*/
				.print-detail{
					width: 60%;
					margin: 0 auto;
					position: relative;
					background: #fff;
					font-size: 14px;
			    color: #333333;
			    padding: 20px;
				}
				
				h2 {
					text-align: center;
					margin: 7% 0;
				}
				
				h4 {
					margin-top: 12%;
				}
				
				.m_changeList {
					width: 100%;
					border-bottom: #dfe6ec 1px solid;
					border-right: #dfe6ec 1px solid;
				}
				
				.m_changeList th {
					padding: 10px;
					background: #eff1f5; 
					border-top: #dfe6ec 1px solid;
					border-left: #dfe6ec 1px solid;
					word-break: break-all;
					text-align: left;
				}
				
				.m_changeList td {
					padding: 10px;
					border-top: #dfe6ec 1px solid;
					border-left: #dfe6ec 1px solid;
					word-break: break-all;
				}
				
				.m_changeList td.ma_left {
					text-align: left;
				}
				
				.m_changeList td.ma_bluebg {
					font-weight: bold;
					background: #eff1f5;
				}
				
				.official-seal {
					width: 150px;
					height: 150px;
					position: absolute;
					right: 5%;
    			bottom: -35%;
				}
				
				.btn-area {
					position: absolute;
					left: 42%;
    			margin-top: 10%;
				}
				
				.print-btn {
					background: #4db3ff;
			    color: #fff;
			    line-height: 1;
			    white-space: nowrap;
			    cursor: pointer;
			    border: 1px solid #4db3ff;
			    margin: 0;
			    padding: 10px 15px;
			    border-radius: 4px;
				}
			/* 屏幕显示样式  End*/
			
			/* 打印样式  Start*/
			@page {
			  size: A4;
			  margin: 0;
			}
			
			@media print {
				.print-detail{
					width: 90%;
					/*font-size: 0.2cm;
			    padding: 0.3cm;*/
				}
				
				/*.m_changeList th {
					padding: 0.3cm;
				}
				
				.m_changeList td {
					padding: 0.3cm;
				}*/
				
				.m_changeList td.ma_bluebg {  
				    background-color: #eff1f5 !important;  
				    -webkit-print-color-adjust: exact;   
				}
				
				.m_changeList th {
					background: #eff1f5 !important;  
			    -webkit-print-color-adjust: exact; 
				}
				
				.no-print {
					display:none
				}
			}
			/* 打印样式  End*/
    </style>
  </head>
  
  <body>
		<div class="print-detail">
			<h2>用餐申请单</h2>
			<div style="position: relative;">
				{{with $d := .Detail}}
				<table border="0" cellspacing="0" cellpadding="0" class="m_changeList"> 
					<colgroup>
						<col width="18%">
						<col width="35%">
						<col width="18%">
						<col width="">
					</colgroup>
					<tbody>
						<tr>
							<td class="ma_bluebg ma_left">申请类型：</td> 
							<td class="ma_left" colspan="3">{{$d.Category}}</td> 
						</tr>
						<tr>
							<td class="ma_bluebg ma_left">申请人：</td> 
							<td class="ma_left">{{$d.Applicant}} - {{$d.Dept}}</td> 
							<!--<td class="ma_bluebg ma_left">联系方式：</td> -->
							<!--<td class="ma_left">{{$d.Mobile}}</td> -->
							<td class="ma_bluebg ma_left">来访单位：</td>
							<td class="ma_left">{{$d.VisitorDept}}</td>
						</tr>
						
						<!--<tr>-->
							<!--<td class="ma_bluebg ma_left">来访单位：</td> -->
							<!--<td class="ma_left">{{$d.VisitorDept}}</td> -->
							<!--<td class="ma_bluebg ma_left">来访级别：</td> -->
							<!--<td class="ma_left">{{$d.VisitorLevel}}</td> -->
						<!--</tr>-->
						
						<!--<tr>-->
							<!--<td class="ma_bluebg ma_left">来访人员：</td> -->
							<!--<td class="ma_left" colspan="3">{{range $d.VisitorNames}}<span style="padding-right: 5px;">{{.}}</span>{{end}}</td> -->
						<!--</tr>-->
						
						<tr>
							<td class="ma_bluebg ma_left">就餐日期：</td> 
							<td class="ma_left">{{$d.VisitDate.Format "2006-01-02"}}</td> 
							<td class="ma_bluebg ma_left">就餐人数：</td> 
							<td class="ma_left">{{$d.MealNum}}人</td> 
						</tr>
						
						<tr>
							<td class="ma_bluebg ma_left">用餐标准：</td> 
							<td class="ma_left">{{$d.Price}}元</td> 
							<td class="ma_bluebg ma_left">用餐地点：</td> 
							<td class="ma_left">{{$d.Room}}</td> 
						</tr>
						
						<tr>
							<td class="ma_bluebg ma_left">审核人：</td> 
							<td class="ma_left">{{$d.Approvedby}}</td> 
							<td class="ma_bluebg ma_left">审核时间：</td> 
							<td class="ma_left">{{$d.ApprovedTime.Format "2006-01-02"}}</td> 
						</tr>
					</tbody>
				</table>
				{{end}}
				
				<!--公章-->
				<img class="official-seal" src=""/>
			</div>
			
			{{if .Others}}
			<h4>合并用餐</h4>
			<table border="0" cellspacing="0" cellpadding="0" class="m_changeList"> 
				<colgroup>
					<col width="50%">
					<!--<col width="18%">-->
					<!--<col width="26%">-->
					<!--<col width="13%">-->
					<col width="">
				</colgroup>
				<thead>
					<tr>
						<th>申请人</th>
						<!--<th>联系电话</th>-->
						<!--<th>来访人员</th>-->
						<!--<th>来访级别</th>-->
						<th>用餐人数</th>
					</tr>
				</thead>
				<tbody>
					{{range .Others}}
					<tr>
						<td>{{.Applicant}} - {{.Dept}}</td>
						<!--<td>{{.Mobile}}</td>-->
						<!--<td>{{range .VisitorNames}}<span style="padding-right: 5px;">{{.}}</span>{{end}}</td>-->
						<!--<td>{{.VisitorLevel}}</td>-->
						<td>{{.MealNum}}人</td>
					</tr>
					{{end}}
				</tbody>
			</table>
			{{end}}
		
			<!--打印按钮-->
			<div class="btn-area no-print">
				<button class="print-btn" onclick="fnPrint()">点击打印</button>
			</div>
		</div>
		<div class="no-print" style="height: 200px;"></div>
  </body>
</html>
<script type="text/javascript">
	//打印
	var fnPrint = function(){
		window.print() ;  
	}
</script>
